import React, { useEffect, useState } from "react";
import {
  Button,
  Cascader,
  DatePicker,
  Form,
  Input,
  InputNumber,
  Radio,
  Select,
  Switch,
  TreeSelect,
} from "antd";
import { Checkbox, Col, Row } from "antd";

const Myform: React.FC = (props) => {
    const [form] = Form.useForm();

    useEffect(()=>{
        if(props.title=='添加'){
            form.setFieldsValue(props.itemobj)
        }
    },[props.title,props.itemobj])




  const onFinish = (values: any) => {
    console.log("Received values of form: ", values);
    let tags: Array<string> = [];

    if (values.tags == 1) {
      tags = ["前端工程师"];
    } else if (values.tags == 2) {
      tags = ["后端工程师"];
    } else if (values.tabs == 3) {
      tags = ["设计师"];
    }

    let obj = {
      ...values,
      key: new Date().getTime(),
      tags,
    };
    console.log(obj);

    props.add(obj);
    props.onClose();
  };

  return (
    <Form onFinish={onFinish} style={{ maxWidth: 600 }} form={form}>
      <Form.Item label="用户名" name="name">
        <Input />
      </Form.Item>
      <Form.Item label="角色" name="role">
        <Radio.Group
          options={[
            { value: 1, label: "超级管理员" },
            { value: 2, label: "开发者" },
          ]}
        />
      </Form.Item>
      <Form.Item label="简介" name="desc">
        <Input.TextArea />
      </Form.Item>
      <Form.Item label="标签" name="tags">
        {/* <Radio.Group
          options={[
            { value: 1, label: "前端工程师" },
            { value: 2, label: "后端工程师" },
            { value: 3, label: "设计师" },
          ]}
        /> */}
        <Checkbox.Group style={{ width: "100%" }} onChange={() => {}}>
          <Row>
            <Col span={8}>
              <Checkbox value="1">前端工程师</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="2">后端工程师</Checkbox>
            </Col>
            <Col span={8}>
              <Checkbox value="3">设计师</Checkbox>
            </Col>
          </Row>
        </Checkbox.Group>
      </Form.Item>
      <Button htmlType="submit">确认</Button>
    </Form>
  );
};

export default Myform;
